<template>
    <div>
        <div class="header">
            <span>{{level}}</span>
        </div>
        <div class="advert"></div>
        <router-link active-class="active" to="/item">
            <div class="button"></div>
        </router-link>
    </div>
  
</template>

<script>

import {mapState} from 'vuex'

export default {
    name:'Home',
    components:{},
    created(){
    },
    computed:{
        ...mapState(['level']),
    }
}
</script>

<style lang="css" scoped>

    .header {
        position: relative;
        top: 0;
        margin-left: 200px;
        background: url('../assets/images/WechatIMG2.png') no-repeat;
        background-size: 100% 100%;
        width: 120px;
        height: 150px;
    }

    .header span {
        position:absolute;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        color: orange;
        left: 37px;
        bottom:16px;
    }

    .advert {
        background: url('../assets/images/1-2.png') no-repeat;
        background-size: 100% 100%;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    .button {
         background: url('../assets/images/1-4.png') no-repeat;
        background-size: 100% 100%;
        width: 100px;
        height: 60px;
        margin: 15px auto;
    }

</style>